<style>
    th, tr {
        text-align: center;
    }

    .shadowDown {
        z-index: 99999999 !important;
    }

    .teacher {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .teacher.is-book {
        color: red;
    }

    label {
        display: inline-block;
        max-width: 100%;
        margin-bottom: 5px;
        font-weight: 400;
        font-size: 16px;
    }

    .weekBar {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
    }

    .layui-layer-page .layui-layer-content {
        overflow: hidden;
    }

    select {
        width: 150px !important;
    }

    .form-group {
        margin-left: 15px;
        margin-top: 15px;
    }

    form {
        padding: 10px 10px 0 10px;
    }

    hr {
        margin-bottom: 0;
    }

    .can-book {
        background-color: rgba(52, 152, 219, 0.4);
    }
</style>

<div class="panel panel-default panel-intro" style="overflow-x: auto">
    {:build_heading()}
    <form class="form-inline" role="form">
        <input id="user_id" type="hidden" value="用户id">
        <h4>数据操作区</h4>
        <hr>
        <div class="form-group">
            <label>筛选分店</label>
            <select id="store-sel" name="store_id" class="form-control operate">

                <option value="">123</option>
                <option value="">123</option>
                <option value="">123</option>
                <option value="">123</option>
            </select>
        </div>
        <div class="form-group">
            <label>筛选课程</label>
            <select id="category-sel" name="category" class="form-control operate">

                <option value="1">课程1</option>
                <option value="1">课程1</option>
                <option value="1">课程1</option>
                <option value="1">课程1</option>
            </select>
        </div>

        <div class="form-group">
            <select id="course-list" name="store_id" class="form-control operate">

            </select>
        </div>

        <div class="form-group">
            <label>筛选教师</label>
            <select id="teacher-list" class="form-control">

            </select>
        </div>
    </form>

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="weekBar" class="weekBar">
                        <div>
                            <a href="javascript:;" class="btn btn-success" data-event="prev_week">上周</a>
                            <a href="javascript:;" class="btn btn-info" data-event="now_week">本周</a>
                            <a href="javascript:;" class="btn btn-success" data-event="next_week">下周</a>
                        </div>
                    </div>
                    <table class="table table-striped table-bordered table-hover table-nowrap">
                        <thead>
                        <tr id="thead">
                            <!--表头数据-->
                        </tr>
                        </thead>
                        <tbody id="tbody">
                        <!--表内数据-->
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

<!--已预约弹框-->
<div id="book-box" style="display: none">

</div>

<!--添加预约模板-->
<script id="temp-book" type="text/html">
    <form class="book-form form-horizontal" style="padding: 20px">
        <div class="form-group">
            <label class="col-sm-4 control-label">预约课程</label>
            <div class="col-sm-6">
                <input name="course_id" value="{{#course_id}}" disabled class="form-control" type="hidden">
                <input value="{{#course_name}}" disabled class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">预约教师</label>
            <div class="col-sm-6">
                <input name="teacher_id" value="{{#teacher_id}}" disabled class="form-control" type="hidden">
                <input value="{{#teacher_name}}" disabled class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">预约日期</label>
            <div class="col-sm-6">
                <input name="date" value="{{#date}}" disabled class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">预约时间</label>
            <div class="col-sm-6">
                <input name="time" value="{{#time}}" disabled class="form-control">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-4 control-label">选择学员</label>
            <div class="col-sm-6">
                <input id="c-student_id" data-rule="required" data-pagination="true" data-params='{"custom[course_id]":"{{#course_id}}"}' data-source="youmi/Book/getStudentListT" class="form-control selectpage" name="student_id" type="text" value="">
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-10">
                <a class="btn btn-success save">保存预约</a>
            </div>
        </div>
    </form>
</script>

<!--预约列表模板-->
<script id="temp-book-box" type="text/html">
    <div class="col-md-12" style="padding-top: 15px">
        <table class="table table-striped table-bordered table-hover table-nowrap">
            <thead>
            <tr>
                <th>学员姓名</th>
                <th>联系手机</th>
                <th>总课时</th>
                <th>剩余课时</th>
                <th>不及格课时</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {{#each $data item i}}
            <tr>
                <td>{{#item.real_name}}</td>
                <td>{{#item.phone}}</td>
                <td>{{#item.class_hour}}</td>
                <td>{{#item.class_hour_used}}</td>
                <td>{{#item.class_hour_fail}}</td>
                <td>{{#item.statusStr}}</td>
                <td>
                    <button data-book_id="{{#item.book_id}}" type="button" class="cancel-book btn btn-xs btn-danger">
                        取消预约
                    </button>
                    <button data-book_id="{{#item.book_id}}" type="button" class="status-book btn btn-xs btn-success">
                        修改状态
                    </button>
                </td>
            </tr>
            {{#/each}}
            </tbody>
        </table>
    </div>
</script>

<!--课程列表模板-->
<script id="temp-course-list" type="text/html">
    {{#each $data item i}}
    <option value="{{#item.id}}">{{#item.name}}</option>
    {{#/each}}
</script>

<!--教师列表模板-->
<script id="temp-teacher-list" type="text/html">
    {{#each $data item i}}
    <option value="{{#item.id}}">{{#item.real_name}}</option>
    {{#/each}}
</script>

<!--表头数据-->
<script id="temp-thead" type="text/html">
    <th>预约时间段</th>
    {{#each $data item i}}
    <th>{{#item.date}}({{#item.week}})</th>
    {{#/each}}
</script>

<!--&lt;!&ndash;表格数据&ndash;&gt;-->
<script id="temp-tbody" type="text/html">
    {{#each $data tr i}}
    <tr>
        <td>{{#tr.time}}</td>
        {{#each tr.data td j}}
        <td data-date="{{#td.date}}" data-time="{{#tr.time}}">
            {{#each td.list item k}}
            <div class="teacher {{#if item.is_book}}is-book{{#/if}}" data-time_id="{{#item.id}}">
                <span>{{#item.teacher_name}}{{#if item.book_num > 0 }} ({{#item.student_name}}){{#/if}}</span>
                <div>({{#item.course_name}})</div>
            </div>
            {{#/each}}
        </td>
        {{#/each}}
    </tr>
    {{#/each}}
</script>